<template>
  <div class="b_body">
    <img v-for="(item, index) in list" :key="index" :src="item.status == 1 ? treePath : treeOverPath" alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }" @click="imgClick(item)" />
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        treePath: require("@/assets/image/tree.png"),
        treeOverPath: require("@/assets/image/tree_over.png"),
        list: [{
          "name": "B-YS-001",
          "x": 540,
          "y": 465,
          "status": 1
        }, {
          "name": "B-YS-002",
          "x": 540,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YS-004",
          "x": 530,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YS-005",
          "x": 520,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YS-006",
          "x": 510,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YH-008",
          "x": 500,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YH-009",
          "x": 488,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YH-010",
          "x": 475,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YH-011",
          "x": 460,
          "y": 456,
          "status": 1
        }, {
          "name": "B-YH-012",
          "x": 442,
          "y": 456,
          "status": 1
        },
        // {
        //   "name": "B-BT-014",
        //   "x": 385,
        //   "y": 456,
        //   "status": 1
        // },
        {
          "name": "B-BT-015",
          "x": 376,
          "y": 470,
          "status": 1
        }, {
          "name": "B-SZ-018",
          "x": 396,
          "y": 470,
          "status": 1
        }, {
          "name": "B-SZ-019",
          "x": 376,
          "y": 490,
          "status": 1
        }, {
          "name": "B-SZ-020",
          "x": 376,
          "y": 510,
          "status": 1
        }, {
          "name": "B-ZW-021",
          "x": 396,
          "y": 510,
          "status": 1
        }, {
          "name": "B-YS-022",
          "x": 396,
          "y": 490,
          "status": 1
        }, {
          "name": "B-BP-024",
          "x": 414,
          "y": 470,
          "status": 1
        }, {
          "name": "B-XS-025",
          "x": 433,
          "y": 516,
          "status": 1
        }, {
          "name": "B-BP-028",
          "x": 442,
          "y": 472,
          "status": 1
        }, {
          "name": "B-YX-029",
          "x": 458,
          "y": 472,
          "status": 1
        }, {
          "name": "B-ZW-030",
          "x": 474,
          "y": 472,
          "status": 1
        }, {
          "name": "B-XL-031",
          "x": 474,
          "y": 498,
          "status": 1
        }, {
          "name": "B-BP-032",
          "x": 488,
          "y": 472,
          "status": 1
        }, {
          "name": "B-BP-033",
          "x": 518,
          "y": 472,
          "status": 1
        }, {
          "name": "B-GB-037",
          "x": 540,
          "y": 474,
          "status": 1
        }, {
          "name": "B-GB-038",
          "x": 540,
          "y": 483,
          "status": 1
        }, {
          "name": "B-GB-039",
          "x": 540,
          "y": 492,
          "status": 1
        }, {
          "name": "B-GB-040",
          "x": 530,
          "y": 515,
          "status": 1
        }, {
          "name": "B-GB-041",
          "x": 520,
          "y": 520,
          "status": 1
        }, {
          "name": "B-YS-043",
          "x": 540,
          "y": 510,
          "status": 1
        }, {
          "name": "B-GB-045",
          "x": 530,
          "y": 522,
          "status": 1
        }, {
          "name": "B-GB-046",
          "x": 530,
          "y": 530,
          "status": 1
        }, {
          "name": "B-GB-047",
          "x": 542,
          "y": 537,
          "status": 1
        }, {
          "name": "B-GB-048",
          "x": 546,
          "y": 546,
          "status": 1
        }, {
          "name": "B-GB-049",
          "x": 548,
          "y": 555,
          "status": 1
        }, {
          "name": "B-YS-053",
          "x": 525,
          "y": 560,
          "status": 1
        }, {
          "name": "B-YS-054",
          "x": 513,
          "y": 548,
          "status": 1
        }, {
          "name": "B-YS-055",
          "x": 495,
          "y": 548,
          "status": 1
        }, {
          "name": "B-YX-056",
          "x": 498,
          "y": 526,
          "status": 1
        }, {
          "name": "B-XS-057",
          "x": 468,
          "y": 548,
          "status": 1
        }, {
          "name": "B-XS-059",
          "x": 440,
          "y": 548,
          "status": 1
        }, {
          "name": "B-BP-060",
          "x": 461,
          "y": 530,
          "status": 1
        }, {
          "name": "B-YS-061",
          "x": 441,
          "y": 540,
          "status": 1
        }, {
          "name": "B-YS-062",
          "x": 421,
          "y": 540,
          "status": 1
        }, {
          "name": "B-GB-063",
          "x": 401,
          "y": 540,
          "status": 1
        }, {
          "name": "B-SZ-064",
          "x": 381,
          "y": 540,
          "status": 1
        }, {
          "name": "B-SZ-065",
          "x": 381,
          "y": 552,
          "status": 1
        }, {
          "name": "B-YS-066",
          "x": 394,
          "y": 557,
          "status": 1
        }, {
          "name": "B-YS-068",
          "x": 418,
          "y": 552,
          "status": 1
        }, {
          "name": "B-ZW-069",
          "x": 401,
          "y": 552,
          "status": 1
        }, {
          "name": "B-ZW-070",
          "x": 431,
          "y": 552,
          "status": 1
        }, {
          "name": "B-WJ-067",
          "x": 403,
          "y": 562,
          "status": 1
        }, {
          "name": "B-WJ-071",
          "x": 413,
          "y": 562,
          "status": 1
        }, {
          "name": "B-WJ-072",
          "x": 440,
          "y": 562,
          "status": 1
        }, {
          "name": "B-WJ-073",
          "x": 454,
          "y": 562,
          "status": 1
        }, {
          "name": "B-WJ-074",
          "x": 468,
          "y": 562,
          "status": 1
        }, {
          "name": "B-WJ-075",
          "x": 497,
          "y": 562,
          "status": 1
        }, {
          "name": "B-YS-076",
          "x": 516,
          "y": 562,
          "status": 1
        }],
      };
    },
    props: ["documentHeight", "listData"],
    computed: {},
    watch: {
      listData: {
        handler(newV) {
          newV.map((x) => {
            this.list.map((j, i) => {
              if (x.number == j.name) {
                j = {
                  ...j,
                  ...x
                };
                this.$set(this.list, i, j);
              }
            });
          });
        },
        deep: true,
      },
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        const ratio = (this.documentHeight * 4) / 812;
        const xOffset = -25;
        const yOffset = -50;
        this.list.map((item) => {
          item.x = item.x * ratio + xOffset * ratio;
          item.y = item.y * ratio + yOffset * ratio;
        });
      },
      imgClick(item) {
        this.poi = item;
        this.$emit("imgClick", item);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .b_body {
    img {
      position: absolute;
      width: 20px;
      height: 20px;
    }
  }
</style>
